<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/vue.js"></script>   <!--引入vue.js文件-->
    <script src="element-ui/lib/index.js"></script>   <!--引入组件库-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">  <!--引入样式库-->
    <script src="js/axios-0.18.0.js"></script>
    <title>帖子详情</title>
    <style>
        .flex1{
            display: flex;
            flex-wrap: wrap;
        }
        .center{
            justify-content: center;
        }
        body{
            margin: 0;
            padding: 0;
        }
        .p_no_margin{
            /*换行*/
            white-space: pre-wrap;
            margin: 0 0 5px 0;
            /*长单词折行*/
            word-wrap: break-word;
        }
        /*尾标签*/
        .footer {
            background-color: #f5f5f5;
            padding: 20px 0;
        }
        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 610px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .footer-links a {
            text-decoration: none;
            color: #333;
            margin-right: 20px;
        }

        .footer-links a:hover {
            color: #007bff;
        }

        .footer-contact {
            display: flex;
            align-items: center;
        }

        .footer-contact i {
            margin-right: 5px;
        }
        /* 弹出框样式 */
        .tooltip-container {
            position: relative;
            display: inline-block;
        }
        .tooltip-container_bottom {
            position: relative;
            display: inline-block;
        }

        .tooltip-content {
            display: none;
            position: absolute;
            bottom: 100%; /* 上方显示 */
            left:  130%;
            transform: translateX(-50%);
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 10px;
            z-index: 1000;
            width: 200px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .tooltip-content_bottom {
            display: none;
            position: absolute;
            top: 100%; /* 上方显示 */
            left:  130%;
            transform: translateX(-50%);
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 10px;
            z-index: 1000;
            width: 200px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .tooltip-container:hover .tooltip-content {
            display: block;
        }
        .tooltip-container_bottom:hover .tooltip-content_bottom {
            display: block;
        }
        /*    悬浮变色*/
        .hover{
            margin: 5px 10px;
        }
        .hover:hover{
            color: orange;
            cursor: pointer;
        }
        .centera{
            text-decoration: none;
            color: black;
        }
        .centera:hover{
            color: orange;
            text-decoration: orange;
            cursor: pointer;
        }
        /*    边框*/
        .border_right{
            border-left: 1px solid #C0C4CC;
            padding: 20px;
        }
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border: 1px solid #ccc;
            overflow-y: auto;
        }


        .image-container {
            display: flex;
            flex-wrap: wrap;
        }

        .image-container img {
            margin: 5px;
            cursor: pointer;
        }
        .bottom_solid{
            border-bottom: 1px solid #DCDFE6;
            margin-bottom: 20px;
        }
        .bottom_solid2{
            border-bottom: 1px solid #F2F6FC;
            margin-bottom: 20px;
        }
        .bottom {
            margin-top: 10px;
            line-height: 21px;
        }
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }
        .image {
            width: 150px;
            height: 150px;
            display: block;
        }


        .title{
            color: #3a8ee6;
            text-decoration: none;
        }
        .title:hover{
            color: orange;
            text-decoration: underline;
            cursor: pointer;
        }
        .center{
            display: flex;
            justify-content: center;
        }
        .information{
            margin-top: 20px;
        }
        .message-container {
            display: flex;
            flex-direction: column;
            align-items: flex-end; /* 确保消息气泡靠右对齐 */
            max-width: 70%; /* 消息气泡的最大宽度 */
            margin: 10px;
        }

        .message-container-send {
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* 确保消息气泡靠左对齐 */
            max-width: 70%; /* 消息气泡的最大宽度 */
            margin: 10px 10px 0 0;
            position: relative;
            top: 15px;
        }

        .message-bubble {
            position: relative;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 8px; /* 圆角边框 */
            background-color: #dcf8c6; /* 消息气泡的背景色 */
            line-height: 1.4;
            max-width: 100%;
            word-wrap: break-word; /* 允许长单词折行 */
        }

        /* 发送的消息气泡样式 */
        .sent {
            background-color: #00a699; /* 发送消息的颜色 */
            color: white; /* 文字颜色 */
            margin-left: auto; /* 消息气泡靠右 */
        }

        /* 接收的消息气泡样式，可以根据需要添加 */
        .received {
            background-color: #e6e6e6; /* 接收消息的颜色 */
            margin-right: auto; /* 消息气泡靠左 */
        }

        .qq-input-container {
            position: relative;
            max-width: 600px;
            margin: auto;
        }

        #qqMessageInput {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: none;
            margin-bottom: 5px;
        }

        .emoji-picker-container {
            position: relative;
            display: inline-block;
        }

        #emojiPickerButton {
            cursor: pointer;
            background: none;
            border: none;
            outline: none;
            font-size: 24px;
            vertical-align: middle;
        }

        /*.emoji-picker {*/
        /*    position: absolute;*/
        /*    bottom: 30px; !* 根据按钮位置调整 *!*/
        /*    left: 0;*/
        /*    width: 300px; !* 根据需要调整 *!*/
        /*    border: 1px solid #ccc;*/
        /*    border-radius: 4px;*/
        /*    background-color: white;*/
        /*    padding: 10px;*/
        /*    display: none;*/
        /*    z-index: 1000;*/
        /*}*/

        .emoji-category {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            width: 200px;
        }

        .emoji {
            width: 24px;
            height: 24px;
            cursor: pointer;
            margin: 5px;
        }




        /* flex布局，让内容垂直和水平居中，超过的部分换行显示 */
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
        /* 按钮的基本样式 */
        .container p {
            position: relative;
            padding: 4px 12px;
            margin: 0;
            border: 2px solid #0f0;
            font-size: 18px;
            font-weight: 600;
            text-decoration: none;
            letter-spacing: 5px;
            color: black;
            filter: hue-rotate(calc(var(--x) * 60deg));
            transition: 0.5s;
        }
        /* 鼠标经过时改变按钮样式 */
        .container p:hover {
            transition-delay: 1.5s;
            color: #000;
            box-shadow: 0 0 10px #0f0,
            0 0 20px #0f0,
            0 0 40px #0f0,
            0 0 80px #0f0,
            0 0 160px #0f0,
            0 0 320px #0f0;
        }
        p span {
            position: relative;
            z-index: 10;
        }
        /* 通过伪元素::before实现按钮左边的线 */
        .container p::before {
            content: "";
            position: absolute;
            left: -20px;
            top: 50%;
            transform: translateY(-50%);
            background: #0f0;
            width: 20px;
            height: 2px;
            box-shadow: 5px -8px 0 #0f0,
            5px 8px 0 #0f0;
            transition: width 0.5s, height 0.5s, left 0.5s,
            box-shadow 0.5s;
            transition-delay: 0s, 1s, 0s, 0.5s;
        }
        /* 鼠标经过时改变线条的样式 */
        .container p:hover::before {
            width: 60%;
            height: 100%;
            left: -2px;
            box-shadow: 0 0 0 #0f0,
            0 0 0 #0f0;
        }
        /* 通过伪元素::after实现按钮右边的线 */
        .container p::after {
            content: "";
            position: absolute;
            right: -20px;
            top: 50%;
            transform: translateY(-50%);
            background: #0f0;
            width: 20px;
            height: 2px;
            box-shadow: -5px -8px 0 #0f0,
            -5px 8px 0 #0f0;
            transition: width 0.5s, height 0.5s, right 0.5s,
            box-shadow 0.5s;
            transition-delay: 0s, 1s, 0s, 0.5s;
        }
        /* 鼠标经过时改变线条的样式 */
        .container p:hover::after {
            width: 60%;
            height: 100%;
            right: -2px;
            box-shadow: 0 0 0 #0f0,
            0 0 0 #0f0;
        }
        .likes{
            position: absolute;
            top: 249px;
            right: 298px;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 引用共享 div 组件 -->
    <shared-div></shared-div>
    <div  style="margin: 0 300px 0 300px;min-height: 1000px" >
        <div style="width: 100%;height: 200px;margin: 10px 0 0 0;display: flex;padding: 15px 0;border: 1px solid #c9cccf">
            <div style="width: 160px;height: 100%">
                <span style="position: absolute; top: 50px; right: 1275px; background-color: #ffcc00; color: #000; padding: 4px 8px; border-radius: 0 0 0 8px;">楼主</span>
                <div class="flex1 center" @click="goToLogin(0,0,0,TheUser.uid)">
                    <img :src="TheUser.image" alt="#" width="80px" height="80px"/>
                </div>
                <div class="flex1 center" style="margin-top: 4px">
                    <p class="p_no_margin">{{TheUser.name}}</p>
                </div>
                <div class="flex1 center" style="margin-top: 4px">
                    <p class="p_no_margin">{{TheUser.level}}</p>
                </div>
                <div class="flex1 center" style="margin-top: 4px">
                    <p class="p_no_margin">{{TheUser.levelname}}</p>
                </div>
                <div class="flex1 center" style="margin-top: 4px" @click="goToLogin(0,TheBar[0]?.bid,0,TheBar[0]?.uid)">
                    <p class="p_no_margin centera">{{TheBar[0]?.bname }}</p>
                </div>
            </div>
            <div style="width: 100%;padding: 0 20px 0 20px;border-left: 1px solid #c9cccf">
                <!-- 容器 -->
                <div class="container likes" style="margin-left: 40px">
                    <p  style="--x:1;cursor: pointer" @click="likes(1,ThePost.uid,ThePost.pid)"><span>点赞{{ThePost.ac}}</span></p>
                    <p  style="--x:2;cursor: pointer;margin: 0 70px" @click="likes(2,ThePost.uid,ThePost.pid)"><span>投币{{ThePost.bc}}</span></p>
                    <p  style="--x:3;cursor: pointer" @click="likes(3,ThePost.uid,ThePost.pid)"><span>转发{{ThePost.fc}}</span></p>
                </div>
                <p class="p_no_margin">{{ThePost.title}}</p>
                <p class="p_no_margin">{{ThePost.content}}</p>
                <div class="flex1">
                    <!-- 遍历每个帖子的图片数组 -->
                    <div class="flex1" v-for="(image, imgIndex) in ThePost.images" :key="imgIndex" style="margin: 10px">
                        <div v-if="image.type === 'images'">
                            <img :src="image.src" @click="showImage(image)" height="110px" width="110px" />
                        </div>
                        <div v-else-if="image.type === 'video'">
                            <video controls height="110px" width="180px">
                                <source :src="image.src">
                            </video>
                        </div>
                        <div v-else-if="image.type === 'music'" style="display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 20px;">
                            <audio controls>
                                <source :src="image.src">
                            </audio>
                        </div>
                        <div v-else>
                            <!-- 处理其他类型的图片，如果有的话 -->
<!--                            <img :src="image.src" @click="showImage(image)" height="50px" width="50px" />-->
                        </div>
                    </div>

                    <div v-if="showModal" class="modal" style="z-index: 1000">
                        <img :src="currentImage" width="400px" height="100%"/>
                        <button @click="closeModal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 100%;height: 100px;display: flex;padding: 15px 0;border: 1px solid #c9cccf;border-top: none;" v-for="(item,index) in TheDiscuss" :key="item.cid">
            <div style="width: 160px;height: 100%">
                <div class="flex1 center" @click="goToLogin(0,0,0,item.uid)">
                    <img :src="item.image" alt="#" width="80px" height="80px"/>
                </div>
                <div class="flex1 center" style="margin-top: 5px">
                    <p class="p_no_margin">{{item.name}}</p>
                </div>
            </div>
            <div style="width: 100%;padding: 0 20px 0 20px;border-left: 1px solid #c9cccf">
                <p class="p_no_margin">{{item.cdate}}</p>
                <p class="p_no_margin">{{item.text}}</p>
            </div>
        </div>

        <div class="qq-input-container" style="margin: 10px 0 0 0;width: 100%">
                            <textarea
                                    id="qqMessageInput"
                                    v-model="message"
                                    placeholder="输入消息..."
                                    @focus="handleFocus"
                                    @blur="handleBlur"
                                    style="width: 1091px"
                            ></textarea>
            <div class="flex1" style="justify-content: space-around;width: 937px">
                <div class="emoji-picker-container">
                    <button
                            id="emojiPickerButton"
                            title="选择表情包"
                            :class="{ active: isEmojiPickerVisible }"
                            @click="toggleEmojiPicker"
                    >
                        &#x1F600;
                    </button>
                    <div
                            class="emoji-picker"
                            v-show="isEmojiPickerVisible"
                    >
                        <!-- 这里使用v-for来循环渲染表情包 -->
                        <div
                                class="emoji-category"
                                v-for="(category, index) in emojiCategories"
                                :key="index"
                        >
                            <img
                                    v-for="emoji in category.emojis"
                                    :key="emoji.src"
                                    class="emoji"
                                    :src="emoji.src"
                                    :data-emoji="emoji.dataEmoji"
                                    @click="insertEmoji(emoji.dataEmoji)"
                            />
                        </div>
                    </div>
                </div>
                <div>
                    <el-button plain icon="el-icon-edit" @click="submit()">发布</el-button>
                </div>
            </div>
        </div>

    </div>

    <div style="position: absolute;top: 56px;right: 305px">
        <el-button type="primary" icon="el-icon-star-off" circle @click="belike(TheUser.uid)"></el-button>
    </div>

    <div style="position: absolute;top:195px;left: 1313px;">
        <el-button type="danger" plain @click="goBack">返回上一页</el-button>
    </div>
    <!--    尾标签-->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-links">
                <a href="#">关于我们</a>
                <a href="#">联系我们</a>
                <a href="#">常见问题</a>
                <a href="#">隐私政策</a>
            </div>
            <div class="footer-contact">
                <i class="fas fa-phone"></i>
                <span>联系电话: 123456789</span>
            </div>
        </div>
    </footer>
</div>
<script src="js/commentDiv.js"></script>
<script>

    window.onload = function () {
        new Vue({
            el: '#app',
            mounted() {
                this.findUser();
            },
            data: {
                name:'',
                password:'',
                isLogin: false,
                TheUser:{},
                TheBar:[],
                pagePid:'',
                pageBid:'',
                //单独帖子
                ThePost:{},
                //图片解析
                images:[],
                showModal: false,
                currentImage: 0,
                //回复
                TheDiscuss:[],
                //评论和
                message: '',
                isEmojiPickerVisible: false,
                emojiCategories: [
                    {
                        name: 'People',
                        emojis: [
                            { src: 'emojis/emoji1.png', dataEmoji: '😄' },
                            { src: 'emojis/emoji2.png', dataEmoji: '😂' },
                            { src: 'emojis/emoji3.png', dataEmoji: '🤣' },
                            { src: 'emojis/emoji4.png', dataEmoji: '😅' },
                            { src: 'emojis/emoji5.png', dataEmoji: '😆' },
                            { src: 'emojis/emoji6.png', dataEmoji: '😉' },
                            { src: 'emojis/emoji7.png', dataEmoji: '😊' },
                            { src: 'emojis/emoji8.png', dataEmoji: '😋' },
                            { src: 'emojis/emoji9.png', dataEmoji: '😎' },
                            { src: 'emojis/emoji10.png', dataEmoji: '😍' },
                            { src: 'emojis/emoji11.png', dataEmoji: '😘' },
                            { src: 'emojis/emoji12.png', dataEmoji: '😤' },
                            { src: 'emojis/emoji13.png', dataEmoji: '😢' },
                            { src: 'emojis/emoji14.png', dataEmoji: '😭' },
                            { src: 'emojis/emoji15.png', dataEmoji: '😬' },
                            { src: 'emojis/emoji16.png', dataEmoji: '😰' },
                            { src: 'emojis/emoji17.png', dataEmoji: '😱' },
                            { src: 'emojis/emoji18.png', dataEmoji: '😳' },
                            { src: 'emojis/emoji19.png', dataEmoji: '😵' },
                            { src: 'emojis/emoji20.png', dataEmoji: '🤡' },
                        ],
                    },
                    // 可以添加更多分类...
                ],

                //历史记录
                TheHistory:[],
                useruid:'',
            },
            methods: {
                //获取用户信息
                findUser(){
                    // 在index.html页面加载时读取
                    this.name = getCookie("name");
                    this.password = getCookie("password");
                    if (this.name && this.name.trim() !== "" && this.password && this.password.trim() !== "") {
                        this.isLogin = true;
                    } else {
                        this.isLogin = false;
                    }
                    //获取url参数
                    const queryString = window.location.search;
                    //获取所有  进行分配空间
                    const urlParams = new URLSearchParams(queryString);
                    //从中选择
                    this.pagePid = urlParams.get('pid');
                    this.pageBid = urlParams.get('bid');
                    // 辅助函数，用于获取cookie的值
                    function getCookie(name) {
                        let cookieArr = document.cookie.split(";");
                        for(let i = 0; i < cookieArr.length; i++) {
                            let cookiePair = cookieArr[i].trim().split("=");
                            if (cookiePair[0] === name) {
                                return cookiePair[1];
                            }
                        }
                        return "";
                    }
                    axios.get("users/findByName_pwd",{params:{name : this.name,password:this.password}}).then(x=> {
                        this.useruid = x.data.uid;
                        this.findBar();
                    });
                },
                findBar() {
                    axios.get("bars/getAllBarsByBid",{params:{bid:this.pageBid}}).then(x=>{
                        this.TheBar = x.data;
                        this.findPost();
                    })
                },
                findPost(){
                    axios.get("posts/findPostByPid", { params: { pid: this.pagePid } }).then(x => {
                        this.ThePost = x.data;
                        const arr = this.ThePost.images;
                        if (arr != null) {
                            // 使用 split 方法来拆分字符串
                            const arrList = arr.split(';');
                            // 更新 ThePost 中的 images 属性
                            this.ThePost.images = arrList.map(a => {
                                // 判断字符串中包含的关键词来设置类型
                                if (a.includes('images')) {
                                    return { src: a, type: 'images' };
                                } else if (a.includes('music')) {
                                    return { src: a, type: 'music' };
                                } else if (a.includes('video')) {
                                    return { src: a, type: 'video' };
                                } else {
                                    return { src: a }; // 默认情况，如果都不包含任何特定关键词
                                }
                            });
                            this.findDiscuss();
                            axios.get("users/findByUid",{params:{uid:this.ThePost.uid}}).then(x=>{
                                this.TheUser = x.data;
                                //进行缓存   历史记录 浏览记录
                                if (this.isLogin){
                                    this.history();
                                }else{
                                    this.$message({
                                        message: '请前往登录',
                                        type: 'warning'
                                    });
                                }
                            })
                        } else {
                            // 如果 arr 不是字符串或为 null，设置 images 为空数组
                            this.ThePost.images = [];
                        }
                    });

                },
                showImage(image) {
                    this.showModal = true;
                    this.currentImage = image.src;
                    console.log("showModal" + this.showModal +"currentImage" + this.currentImage)
                },
                closeModal() {
                    this.showModal = false;
                },
                //回复帖子部分
                findDiscuss(){
                    axios.get("posts/getDiscuss",{params:{pid:this.pagePid}}).then(x=>{
                        this.TheDiscuss = x.data;
                    })
                },
                // 评论和emoji
                toggleEmojiPicker() {
                    this.isEmojiPickerVisible = !this.isEmojiPickerVisible;
                },
                insertEmoji(emoji) {
                    this.message += emoji;
                    this.isEmojiPickerVisible = false;
                },
                handleFocus() {
                    // 当输入框获得焦点时可以执行的操作
                },
                handleBlur() {
                    // 当输入框失去焦点时可以执行的操作
                },
                showImage(image) {
                    this.showModal = true;
                    this.currentImage = image.src;
                    console.log("showModal" + this.showModal +"currentImage" + this.currentImage)
                },
                closeModal() {
                    this.showModal = false;
                },

                //提交评论
                submit(){
                    if (this.name && this.password ){
                        axios.get("posts/addDiscuss",{params:{uid:this.TheUser.uid,text:this.message,pid:this.pagePid}}).then(x=>{
                            this.$message({
                                message: '成功发布',
                                type: 'success'
                            });
                            // 成功提交后，将新评论加入到TheDiscuss数组中
                            let currentDate = new Date();
                            let formattedDate = `${currentDate.getFullYear()}-${(currentDate.getMonth() + 1).toString().padStart(2, '0')}-${currentDate.getDate().toString().padStart(2, '0')} ${currentDate.getHours().toString().padStart(2, '0')}:${currentDate.getMinutes().toString().padStart(2, '0')}:${currentDate.getSeconds().toString().padStart(2, '0')}`;

                            // 成功提交后，将新评论加入到TheDiscuss数组中
                            let newDiscuss = {
                                image: this.TheUser.image, // 假设TheUser中有用户头像信息
                                name: this.TheUser.name,   // 假设TheUser中有用户名信息
                                cdate: formattedDate,  // 假设服务器返回评论日期信息
                                text: this.message // 提交的评论内容
                            };
                            this.TheDiscuss.push(newDiscuss); // 将新评论插入到数组最前面
                            this.message = '';
                        })
                    }else{
                        this.$message({
                            message: '请前往登录',
                            type: 'warning'
                        });
                    }
                    if ( !this.message ){
                        this.$message({
                            message: '请写出的想法',
                            type: 'warning'
                        });
                    }
                },

                //最外层跳转到登录界面   个人中心、登录、论坛、个人、帖子
                goToLogin(index,bid,tid,uid) {
                    if (bid && uid){
                        console.log(bid)
                        window.top.location.href = `bardetail.html?b=${bid}&u=${uid}`
                    }
                    if (uid && !bid && !tid && !index){
                        console.log(uid)
                        window.top.location.href = `userdetail.html?uid=${uid}`
                    }
                },
                //点赞功能
                likes(name,otherid,pid){
                    if (this.isLogin){
                        if (name == 1){
                            axios.get("users/likes",{params:{uid:this.TheUser.uid,pid:pid,likes:1,shares:0,coins:0,otherid:otherid}}).then(x=>{
                                if (x.data =='ok'){
                                    this.$message({
                                        message: '点赞成功',
                                        type: 'success'
                                    });
                                    this.ThePost.ac ++;
                                }
                                if (x.data == 'ac'){
                                    this.$message({
                                        message: '已经点过赞了',
                                        type: 'warning'
                                    });
                                }
                            })
                        }else if(name == 2){
                            axios.get("users/likes",{params:{uid:this.TheUser.uid,pid:pid,likes:0,shares:0,coins:1,otherid:otherid}}).then(x=>{
                                if (x.data =='ok'){
                                    this.$message({
                                        message: '投币成功',
                                        type: 'success'
                                    });
                                    this.ThePost.bc ++;
                                }
                                if (x.data == 'bc'){
                                    this.$message({
                                        message: '最多投两个币',
                                        type: 'warning'
                                    });
                                }
                            })
                        }else if(name == 3){
                            axios.get("users/likes",{params:{uid:this.TheUser.uid,pid:pid,likes:0,shares:1,coins:0,otherid:otherid}}).then(x=>{
                                if (x.data == 'ok' || x.data =='fc'){

                                    // 获取当前页面的URL
                                    var currentPageUrl = window.location.href;

                                    // 使用剪贴板API复制URL
                                    navigator.clipboard.writeText(currentPageUrl)
                                        .then(() => {
                                            // 复制成功后的操作，可以是弹出消息或其他提示
                                            this.$message({
                                                message: '已复制链接',
                                                type: 'success'
                                            });
                                        })
                                        .catch(err => {
                                            // 复制失败的处理
                                            console.error('无法复制: ', err);
                                        });
                                }
                            })
                        }
                    }else{
                        this.$message({
                            message: '请前往登录',
                            type: 'warning'
                        });
                    }

                },
                //浏览记录
                history(){
                    axios.get("posts/findpbu",{params:{pid:this.pagePid,uid:this.useruid}}).then(x=>{
                        this.TheHistory = x.data;
                        console.log(this.TheHistory)
                    })
                },
                belike(uid){
                    console.log("ssd"+uid)
                },

                goBack(){
                    window.history.back();
                },


            },

        });
    };
</script>
</body>
</html>
